<template>
   <view class="uv-page" ref="page">
      <uv-cell-group>
         <uv-cell
            @click="showPickColor(index)"
            :title="item.title"
            v-for="(item, index) in list"
            :key="index"
            isLink
         >
            <template v-slot:value>
               <view
                  class="color"
                  :style="{
                     background: item.color,
                  }"
               >
               </view>
            </template>
            <template v-slot:icon>
               <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
            </template>
         </uv-cell>
      </uv-cell-group>
      <view>
         <uv-pick-color
            ref="pickColor1"
            :scrollTop="scrollTop"
            @confirm="confirm"
            @cancel="cancel"
         ></uv-pick-color>
         <uv-pick-color
            ref="pickColor2"
            :scrollTop="scrollTop"
            :color="color"
            @confirm="confirm"
            @cancel="cancel"
         ></uv-pick-color>
         <uv-pick-color
            ref="pickColor3"
            :scrollTop="scrollTop"
            :prefab-color="prefabColor"
            @confirm="confirm"
            @cancel="cancel"
         ></uv-pick-color>
         <uv-pick-color
            ref="pickColor4"
            :scrollTop="scrollTop"
            title="颜色选择"
            @confirm="confirm"
            @cancel="cancel"
         ></uv-pick-color>
         <uv-pick-color
            ref="pickColor5"
            :scrollTop="scrollTop"
            :closeOnClickOverlay="false"
            @confirm="confirm"
            @cancel="cancel"
            @close="close"
         ></uv-pick-color>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { onPageScroll } from '@dcloudio/uni-app';
import { ref } from 'vue';

const pickColor1 = ref();
const pickColor2 = ref();
const pickColor3 = ref();
const pickColor4 = ref();
const pickColor5 = ref();

const index = ref(0);
const scrollTop = ref(0);
const color = ref({ r: 60, g: 156, b: 255, a: 1 });
const prefabColor = ref([
   {
      r: 60,
      g: 156,
      b: 255,
      a: 1,
   },
   {
      r: 245,
      g: 108,
      b: 108,
      a: 1,
   },
]);
const list = ref([
   {
      title: '基础使用',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/2.png',
      color: 'rgba(0,0,0,0)',
   },
   {
      title: '设置初始颜色',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/5.png',
      color: 'rgba(60,156,255,1)',
   },
   {
      title: '设置预制颜色',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/1.png',
      color: 'rgba(0,0,0,0)',
   },
   {
      title: '设置标题',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/4.png',
      color: 'rgba(0,0,0,0)',
   },
   {
      title: '禁止点击遮罩关闭',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/6.png',
      color: 'rgba(0,0,0,0)',
   },
]);

onPageScroll(e => {
   scrollTop.value = e.scrollTop;
});

const showPickColor = (_index: number) => {
   index.value = _index + 1;
   switch (index.value) {
      case 1:
         pickColor1.value.open();
         break;
      case 2:
         pickColor2.value.open();
         break;

      case 3:
         pickColor3.value.open();
         break;
      case 4:
         pickColor4.value.open();
         break;
      case 5:
         pickColor5.value.open();
         break;
   }
};
const confirm = (e: any) => {
   console.log('confirm', e);
   const color = `rgba(${e.rgba.r},${e.rgba.g},${e.rgba.b},${e.rgba.a})`;
   list.value[index.value - 1].color = color;
};
const cancel = () => {
   console.log('cancel');
};
const close = () => {
   console.log('close');
};
</script>

<style lang="scss" scoped>
.uv-page {
   .color {
      width: 50rpx;
      height: 50rpx;
      border-radius: 6rpx;
   }
}
</style>
